<style lang="scss">
.findPass {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../assets/loginBg.jpg") center/cover no-repeat;
    .findPassBox {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 480px;
        height: 320px;
        background-color: #fff;
        .submit {
            // height: 40px;
            background-color: #419ef2;
            border-color: #419ef2;
            font-size: 16px;
        }
    }
}
</style>

<template>
<div class="findPass">
	<div class="findPassBox modelBox">
		<div class="modelHead">密码找回</div>
		<div class="modelBody">
			<el-form class="ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules">
				<el-form-item prop="username">
					<el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="authCode" class="messBox">
					<el-input class="messInput" v-model="ruleForm.authCode" placeholder="验证码" auto-complete="off" :maxlength="6"></el-input>
					<send-mess :username="ruleForm.username"></send-mess>
				</el-form-item>

				<el-button type="primary" class="submit" @click="save('ruleForm')">保存</el-button>
			</el-form>
		</div>
	</div>
</div>
</template>

<script>
import Util from '../libs/util'
import SendMess from '../components/sendMess'

export default {
	data() {
		return {
			ruleForm: {
				username: 'admin',
				authCode: ''
			},
			rules: {
				username: [{
					validator: (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入用户名'));
						} else {
							callback();
						}
					},
					trigger: 'blur'
				}],
				authCode: [{
					validator: (rule, value, callback) => {
						//let ereg=/^\d+$/;
						if (value === '') {
							callback(new Error('请输入手机验证码'));
						} else if (value == this.$store.state.authCode.data.authCode) {
							callback();
						} else {
							callback(new Error('验证码校验不通过'));
						}
					},
					trigger: 'blur'
				}]
			}
		}
	},
	methods: {
		save(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$store.dispatch('findPassPage_findPass', this.ruleForm).then((data) => {
						this.$message({
							message: '修改成功，请牢记密码',
							type: 'success'
						})
						setTimeout(() => {
							this.$router.push({
								'name': 'Login'
							})
						}, 2000)
					}).catch(err => {
						if (err) {
							this.$message({
								message: err.mess,
								type: 'error'
							})
						} else {
							this.$message({
								message: '修改失败',
								type: 'error'
							})
						}
					})
				} else {
					this.$message({
						message: '请填写正确的登陆信息',
						type: 'error'
					})
					return false
				}
			});
		}
	},
	mounted: function() {
		Util.title()
	},
	components: {
		SendMess
	}
}
</script>
